<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>自定义input file</title>
        <style>
        
            /*蓝色按钮,绝对定位*/
            .blueButton
            {
                position: absolute;
                display: block;
                width: 100px;
                height: 40px;
                background-color: #00b3ee;
                color: #fff;
                text-decoration: none;
                text-align: center;
                font:normal normal normal 16px/40px 'Microsoft YaHei';
                cursor: pointer;
                border-radius: 4px;
            }
            .blueButton:hover
            {
                text-decoration: none;
            }
            /*自定义上传,位置大小都和a完全一样,而且完全透明*/
            .myFileUpload
            {
                position: absolute;
                display: block;
                width: 100px;
                height: 40px;
                opacity: 0;
            }
            /*显示上传文件夹名的Div*/
            .show
            {
                position: absolute;
                top:40px;
                width: 100%;
                height: 30px;
                font:normal normal normal 14px/30px 'Microsoft YaHei';
            }
        
        </style>
    </head>
    <body>
    
         <a href='javascript:void(0);' class="blueButton">选择文件</a>
         <input type="file" class="myFileUpload" />
         <div class="show"></div>
    
        <script src="Js/jquery.min.js"></script>
        <script>
             $(document).ready(function(){
                $(".myFileUpload").change(function(){
                    var arrs=$(this).val().split('\\');
                    var filename=arrs[arrs.length-1];
                    $(".show").html(filename);
                });
            }); 
        </script>
    </body>
</html>